<template>
  <div class="examine-content">
    <div class="notice-message">
      <div class="notice-desc"><b>注意：</b>请在设备上放置患者处方、认定表及相关资料后，点击一键审方！</div>
    </div>
    <div class="examine-center">
      <div class="examine-title">
        <img src="@/assets/images/doctor.png" />
        <div class="title">我是国药AI审方，很高兴见到你！</div>
      </div>
      <div class="btn-exam">
        <el-button size="large" type="primary" class="btn-style" @click="gotoCheck()"
          :disabled="global.activeIndex != 0"><img src="@/assets/images/check.png" class="btn-icon" />一键审方</el-button>
      </div>
      <event-steps v-show="global.activeIndex != 0"></event-steps>
    </div>
  </div>
  <!-- 患者匹配信息确认 -->
  <first-reviewer-form v-if="global.activeIndex == 3 && global.firstCheckState === true"></first-reviewer-form>
  <reviewer-form v-if="global.activeIndex == 3 && global.firstCheckState === false"></reviewer-form>
</template>
<script setup>
import globalStore from '@/stores/modules/global';
import websocketPrintHook from '@/hooks/websocketPrint';
const { initWebSocket, messages } = websocketPrintHook()
const global = globalStore()
const gotoCheck = () => {
  global.activeIndex = 1
  global.currentId = ''
  gloabl.loading = true
  initWebSocket()
}
</script>
<style lang="scss" scoped>
.examine-content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .examine-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    background: #fff;
    margin: 12px;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 0px 16px 0px rgba(21, 102, 80, 0.10);
  }

  .notice-message {
    box-sizing: border-box;
    background-color: rgb(245,
        108,
        108, .1);
    border-left: 5px solid #f56c6c;
    border-radius: 4px;
    // width: 100%;
    margin: 12px 12px 0 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .notice-desc {
      font-size: 16px;
      color: #666;
      margin: 16px;
    }
  }

  .examine-title {
    display: flex;
    align-items: center;
    gap: 20px;

    img {
      width: 50px;
    }

    .title {
      font-size: 28px;
    }
  }

  .btn-exam {
    margin: 60px 0 30px 0;

    .btn-style {
      padding: 26px 40px;
      font-size: 20px;

      .btn-icon {
        width: 26px;
        margin-right: 12px;
      }
    }
  }

  .step-content {
    margin: 40px;
    width: 70%;
  }
}

.btns {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
</style>